<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习1-选择器</title>
    <style>
        /* 通用设置 */
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }

        /* 字母颜色设置 */
        .g1 {
            color: #4285F4;
            /* 蓝色 */
            font-size: 100px;
            font-weight: bold;
            /* font-weight用于定义字体的粗细程度 */
            /* font-weight支持两类值
            1、关键字值 normal(默认值 等同于400) bold(粗体 等同于700) bolder 比父元素更粗的字体 lighter(比父元素更细的字体)
            2、数值(从100到900) */
        }

        .o1 {
            color: #DB4437;
            /* 红色 */
            font-size: 100px;
            font-weight: bold;
        }

        .o2 {
            color: #F4B400;
            /* 黄色 */
            font-size: 100px;
            font-weight: bold;
        }

        .g2 {
            color: #4285F4;
            /* 蓝色 */
            font-size: 100px;
            font-weight: bold;
        }

        .l {
            color: #0F9D58;
            /* 绿色 */
            font-size: 100px;
            font-weight: bold;
        }

        .e {
            color: #DB4437;
            /* 红色 */
            font-size: 100px;
            font-weight: bold;
        }

        span:hover {
            color: yellow;
        }
    </style>
</head>

<body>
    <div>
        <span class="g1">G</span>
        <span class="o1">o</span>
        <span class="o2">o</span>
        <span class="g2">g</span>
        <span class="l">l</span>
        <span class="e">e</span>
    </div>
</body>

</html>